---
# title: "Margin"
title: "外边距"
# description: "Utilities for controlling an element's margin."
description: "控制元素外边距的功能类"
features:
  responsive: true
  customizable: true
  hover: false
  focus: false
---

import plugin from 'tailwindcss/lib/plugins/margin'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'
import { numbersFirstByPrefix } from '@/utils/sortClasses'

export const classes = {
  plugin,
  sort: numbersFirstByPrefix,
}

<!-- ## Add margin to a single side -->
## 为单侧添加外边距

<!-- Control the margin on one side of an element using the `m{t|r|b|l}-{size}` utilities. -->
使用 `m{t|r|b|l}-{size}` 功能类控制元素一侧的外边距。

<!-- For example, `mt-6` would add `1.5rem` of margin to the top of an element, `mr-4` would add `1rem` of margin to the right of an element, `mb-8` would add `2rem` of margin to the bottom of an element, and `ml-2` would add `0.5rem` of margin to the left of an element. -->
例如，`mt-6` 将在元素顶部增加 `1.5rem` 的外边距，`mr-4` 将在元素右侧增加 `1rem` 的外边距，`mb-8` 将在元素底部增加 `2rem` 的外边距，`ml-2` 将在元素左侧增加 `0.5rem` 的外边距。

```html rose
<template preview>
  <div class="flex flex-wrap justify-around items-center text-white font-mono">

    <div class="bg-stripes bg-stripes-rose-500 overflow-hidden m-2 sm:m-0">
      <div class="mt-8 bg-rose-500 flex rounded-md items-center justify-center py-3 px-4">mt-8</div>
    </div>

    <div class="bg-stripes bg-stripes-rose-500 overflow-hidden m-2 sm:m-0">
      <div class="mr-8 bg-rose-500 flex rounded-md items-center justify-center py-3 px-4">mr-8</div>
    </div>

    <div class="bg-stripes bg-stripes-rose-500 overflow-hidden m-2 sm:m-0">
      <div class="mb-8 bg-rose-500 flex rounded-md items-center justify-center py-3 px-4">mb-8</div>
    </div>

    <div class="bg-stripes bg-stripes-rose-500 overflow-hidden m-2 sm:m-0">
      <div class="ml-8 bg-rose-500 flex rounded-md items-center justify-center py-3 px-4">ml-8</div>
    </div>
  </div>
</template>

<div class="**mt-8** ...">mt-8</div>
<div class="**mr-8** ...">mr-8</div>
<div class="**mb-8** ...">mb-8</div>
<div class="**ml-8** ...">ml-8</div>
```

<!-- ## Add horizontal margin -->
## 添加水平方向的外边距

<!-- Control the horizontal margin of an element using the `mx-{size}` utilities. -->
使用 `mx-{size}` 功能类控制元素水平方向的外边距。

```html purple
<template preview>
  <div class="flex justify-around items-center text-white font-mono">
    <div class="bg-stripes bg-stripes-purple-500">
      <div class="mx-8 bg-purple-500 rounded-md flex items-center justify-center py-3 px-4">mx-8</div>
    </div>
  </div>
</template>

<div class="**mx-8** ...">mx-8</div>
```

<!-- ## Add vertical margin -->
## 添加垂直方向的外边距

<!-- Control the vertical margin of an element using the `my-{size}` utilities. -->
使用 `my-{size}` 功能类控制元素垂直方向的外边距。

```html emerald
<template preview>
  <div class="flex justify-around items-center text-white font-mono">
    <div class="bg-stripes bg-stripes-emerald-500">
      <div class="my-8 bg-emerald-500 rounded-md flex items-center justify-center py-3 px-4">my-8</div>
    </div>
  </div>
</template>

<div class="**my-8** ...">my-8</div>
```

<!-- ## Add margin to all sides -->
## 为四个边添加外边距

<!-- Control the margin on all sides of an element using the `m-{size}` utilities. -->
使用 `m-{size}` 功能类控制元素四个边的外边距。

```html lightBlue
<template preview>
  <div class="flex justify-around items-center text-white font-mono">
    <div class="bg-stripes bg-stripes-light-blue-500">
      <div class="m-8 bg-light-blue-500 rounded-md flex items-center justify-center py-3 px-4">m-8</div>
    </div>
  </div>
</template>

<div class="**m-8** ...">m-8</div>
```

<!-- ## Negative margins -->
## 负外边距

<!-- Control the negative margin of an element using the `-m{side?}-{size}` utilities. -->
使用 `-m{side?}-{size}` 功能类控制元素的负外边距。

```html fuchsia
<template preview>
  <div class="flex justify-around items-center text-white font-mono">
    <div class="flex flex-col items-center">
      <div class="relative w-32 h-16 bg-fuchsia-300 rounded-md overflow-hidden">
        <div class="absolute bottom-0 w-full h-8 bg-stripes bg-stripes-red-900"></div>
      </div>
      <div class="relative -mt-8 bg-fuchsia-500 rounded-md flex items-center justify-center py-3 px-4">-mt-8</div>
    </div>
  </div>
</template>

<div class="w-32 h-16 bg-fuchsia-300 ..."></div>
<div class="**-mt-8** bg-fuchsia-500 ...">-mt-8</div>
```

---

<!-- ## Responsive -->
## 响应式

<!-- To control the margin of an element at a specific breakpoint, add a `{screen}:` prefix to any existing margin utility. For example, adding the class `md:my-8` to an element would apply the `my-8` utility at medium screen sizes and above. -->
要在特定的断点处控制元素的外边距，请在任何现有的 margin 功能类前添加 `{screen}:` 前缀。例如，将 `md:my-8` 类添加到一个元素中，就可以在中等及以上屏幕尺寸的情况下应用 `my-8` 功能。

```html
<div class="mt-8 **md:my-8**">
    <!-- ... -->
</div>
```

<!-- For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. -->
关于 Tailwind 的响应式设计功能的更多信息，请查看 [响应式设计](/docs/responsive-design) 文档。

---

<!-- ## Customizing -->
## 定制

<!-- ### Margin scale -->
### 外边距比例

<!-- By default Tailwind provides 20 margin utilities for each side and axis. -->
默认情况下，Tailwind 为每个边和轴提供了 20 个固定的外边距功能类。

<!-- If you'd like to customize these values for padding, margin, width, and height all at once, use the `theme.spacing` section of your `tailwind.config.js` file. -->
如果您想一次性自定义 padding、margin、width 和 height 的值，请使用您的 `tailwind.config.js` 文件中的 `theme.spacing` 部分。

```diff-js
  // tailwind.config.js
  module.exports = {
    theme: {
      spacing: {
+       sm: '8px',
+       md: '16px',
+       lg: '24px',
+       xl: '48px',
      }
    }
  }
```

<!-- To customize only the margin values, use the `theme.margin` section of your `tailwind.config.js` file. -->
如果只想自定义外边距值，请使用您的 `tailwind.config.js` 文件中的 `theme.margin` 部分。

```diff-js
  // tailwind.config.js
  module.exports = {
    theme: {
      margin: {
+       sm: '8px',
+       md: '16px',
+       lg: '24px',
+       xl: '48px',
      }
    }
  }
```

<!-- Learn more about customizing the default theme in the [theme customization documentation](/docs/theme#customizing-the-default-theme). -->
在 [主题自定义文档](/docs/theme#customizing-the-default-theme) 中了解更多关于自定义默认主题的信息。

### Negative values
### 负值

<!-- If you'd like to add additional negative margin classes (taking the form `-m{side?}-{size}`), prefix the keys in your config file with a dash: -->
如果您想添加额外的负页边距类（采取`-m{side?}-{size}`的形式），在配置文件中的键前加上破折号。

```diff-js
  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        margin: {
+         '-72': '-18rem',
        }
      }
    }
  }
```

<!-- Tailwind is smart enough to generate classes like `-mx-72` when it sees the leading dash, not `mx--72` like you might expect. -->
Tailwind 是足够聪明的，当它看到前面的破折号时，会生成像 `-mx-72` 这样的类，而不是像您可能期望的 `mx--72`。

### 变体

<Variants plugin="margin" />

### 禁用

<Disabling plugin="margin" />
